<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dragDiv {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            border-radius: 5px;
            border:1px solid #333;
            cursor: pointer;
            background-color: antiquewhite;
        }
        .move{
            border: 0;
            box-shadow: 3px 3px 15px rgba(0,0,0,0.3),-3px -3px 15px rgba(0,0,0,0.3);
        }
    </style>
</head>

<body>
    <div class="dragDiv" id="dragDiv"></div>
    <script>

        var div = document.querySelector('#dragDiv');
        div.onmousedown = function (event) {
            div.classList.add('move')
            var ev = event || window.event;
            event.stopPropagation();
            var disX = ev.clientX - div.offsetLeft;
            var disY = ev.clientY - div.offsetTop;
            document.onmousemove = function (event) {
                var ev = event || window.event;
                
                div.style.left = ev.clientX - disX + "px";
                div.style.top = ev.clientY - disY + "px";
                div.style.cursor = "move";
            };
        };
        div.onmouseup = function () {
            div.classList.remove('move')
            document.onmousemove = null;
            this.style.cursor = "pointer";
        };

    </script>
</body>

</html>